<template>
  <a-card :bordered="false" class="card-area">
    <a-row type="flex">
      <detail-list style="width: 100%" :col="2">
        <detail-list-item :term="$t('key.xh')">{{ info.xh }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.name')">{{ info.xm }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.sex')">{{ info.xbmc }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.yx')">{{ info.ssyxmc }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.zy')">{{ info.sszymc }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.yjfx')">{{ info.yjfxmc }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.xz')">{{ info.xz }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.dsxm')">{{ info.dsxm }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.personalCall')">{{ info.lxdh }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.shzt')">{{ info.shzt == '07' ? "专业学位办已备案" : (info.shzt == '08' ? "专业学位办未备案" : info.shztmc) }}&nbsp;</detail-list-item>
      </detail-list>
    </a-row>
    <p style="color:rgba(0, 0, 0, 0.85);">{{ $t('key.sjzm') }}:</p>
    <p>
      <img v-if="info.sjzm" style="width:200px" :src="`${IMG_URL}${info.sjzm}`" alt="">
      <span v-else>暂无</span>
    </p>
    <p style="color:rgba(0, 0, 0, 0.85);">{{ $t('key.sjdwzdjspj') }}:</p>
    <pre style="white-space: pre-wrap;
    word-wrap: break-word;">{{ info.sjdwzdjspj }}</pre>
    <!-- <p>{{ info.sjdwzdjspj }}</p> -->
    <p style="color:rgba(0, 0, 0, 0.85);">{{ $t('key.zwzj') }}:</p>
    <pre style="white-space: pre-wrap;
    word-wrap: break-word;">{{ info.zwzj }}</pre>
    <!-- <p>{{ info.zwzj }}</p> -->
    <!-- <a-row>
        <detail-list-item :term="$t('key.sjzm')">{{ info.lxdh }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.sjdwzdjspj')">{{ info.lxdh }}&nbsp;</detail-list-item>
        <detail-list-item :term="$t('key.zwzj')">{{ info.lxdh }}&nbsp;</detail-list-item>
    </a-row> -->
    <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="$router.back()">{{ $t(`button.return`) }}</a-button>
      <!-- <a-button style="float: right;margin-top: 10px;margin-right: 10px;" type="primary" @click="exportWord">{{ $t(`button.export`) }}WORD</a-button> -->
      <!-- <a-button v-if="isCheck" style="float: right;margin-top: 10px;margin-right: 10px;" @click="checkBack()" type="danger">{{ $t(`button.withdraw`) }}</a-button> -->
      <a-button v-if="isCheck" style="float: right;margin-top: 10px;margin-right: 10px;" @click="check('04')" type="primary">{{ $t(`key.fail`) }}</a-button>
      <a-button v-if="isCheck" style="float: right;margin-top: 10px;margin-right: 10px;" @click="check('03')" type="primary">{{ $t(`key.approved`) }}</a-button>
    </div>
  </a-card>
</template>

<script>
import DetailList from "~/tool/DetailList";
const DetailListItem = DetailList.Item;
import { mapState } from "vuex";

export default {
  components: { DetailList, DetailListItem },
  computed: {
    id() {
      return this.$route.query.id
    },
    isCheck() {
      return +this.$route.query.isCheck
    }
  },
  data() {
    return {
      IMG_URL: process.env.IMG_URL,
      info: {}
    };
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$api.degree.zysjjgpjInfo(this.id).then(res => {
        this.info = res.data
      });
    },
    check(code) {
      this.$confirm({
        title: `确定${code === '04' ? '不通过' : '通过'}该实践评价吗?`,
        centered: true,
        onOk: () => {
          this.$api.degree.zysjjgpjCheck({id: this.id, shjg: code}).then(res => {
            this.$message.success(res.msg)
            this.$router.back()
            // this.getDetail()
            // this.$router.replace(`/degree/practiceResult/detail?id=${this.id}&isCheck=0`)
          });
        },
        onCancel: () => { }
      })
    },
    checkBack() {
      this.$confirm({
        title: '确定退回该实践评价吗?',
        centered: true,
        onOk: () => {
          this.$api.degree.zysjjgpjBack({id: this.id}).then(res => {
            this.getDetail()
            this.$router.back()
            // this.$message.success(res.msg)
            // this.$router.replace(`/degree/professionalPractice/detail?id=${this.id}&isCheck=0`)
          });
        },
        onCancel: () => { }
      })
    },
    exportWord() {
      this.$export('/teacherClient/zysjjgpj/expZysj', {id: this.id})
    }
  }
};
</script>

<style>
</style>
